<template>
<!--pages/topicality/jiankangma/jiankangma.wxml-->

<view class="body">
  <image src="http://imgbdb3.bendibao.com/img/sy_jkm.jpg" class="header"></image>
    <view class="/news/hesuanjiance/city_didian.php city">
      <view class="city-name">{{city}}</view>
    </view>
  <change-city @changeCity="changeCity" :city="city"></change-city>
    <view v-for="(item, index) in list" :key="index" class="list-border">
      <view class="list-item" v-if="item.name">
        <image src="http://imgbdb3.bendibao.com/xcxbdb/file/20212/18/20210218152506_33799.png" class="title-icon" alt></image>
        <p class="list-title">{{item.name}}</p>
      </view>
      <view class="list-detail">
        <view class="list-content" v-if="item.pingtai">
          <span class="list-detail-title">申领平台</span>
          <span class="list-detail-content">{{item.pingtai}}</span>
        </view>
        <view class="list-content" v-if="item.app_url||item.site_url||item.xcx_url">
          <span class="list-detail-title" style="float:left;">申领入口</span>
          <view class="list-detail-content" style="float:left;">
            <ul v-if="item.site_url">
              <li :class="tools.includesHttp(item.site_url)? 'href':''" @tap="articleDetail" :data-key="item.site_arr">
                网页申领 </li>
              <li>
                <a class="guide" v-if="item.site_gl" @tap="articleDetail" :data-key="item.site_gl_arr">
                  <image class="guide-b-icon" src="http://imgbdb3.bendibao.com/xcxbdb/file/20212/18/20210218153021_38528.png"></image>
                  <span>操作指南</span>
                  <image class="guide-a-icon" src="/static/images/back.png" alt></image></a></li>
            </ul>
            <ul v-if="item.xcx_url">
              <li :class="tools.includesHttp(item.xcx_url)? 'href':''" @tap="articleDetail" :data-key="item.xcx_arr">
                {{tools.includesHttp(item.xcx_url) ? '小程序申领': item.xcx_url }} </li>
              <li>
                <a class="guide" v-if="item.xcx_gl" @tap="articleDetail" :data-key="item.xcx_gl_arr">
                  <image class="guide-b-icon" src="http://imgbdb3.bendibao.com/xcxbdb/file/20212/20/20210220142004_88536.jpeg"></image>
                  <span>操作指南</span>
                  <image class="guide-a-icon" src="/static/images/back.png" alt></image></a></li>
            </ul>
            <ul v-if="item.app_url">
              <li :class="tools.includesHttp(item.app_url)? 'href':''" @tap="articleDetail" :data-key="item.app_arr">
                App申领 </li>
              <li>
                <a class="guide" v-if="item.app_gl" @tap="articleDetail" :data-key="item.app_gl_arr">
                  <image class="guide-b-icon" src="http://imgbdb3.bendibao.com/xcxbdb/file/20212/20/20210220142004_88536.jpeg"></image>
                  <span>操作指南</span>
                  <image class="guide-a-icon" src="/static/images/back.png" alt></image></a></li>
            </ul>
          </view>
          <view style="clear:both"></view>
        </view>
        <view class="list-content" v-if="item.yongtu">
          <span class="list-detail-title">码用途</span>
          <span class="list-detail-content"><text user-select="true" :class="item.yongtu_url? 'href':''" @tap="articleDetail" :data-key="item.yongtu_arr">{{item.yongtu}}</text></span>
        </view>
        <view class="list-content" v-if="item.nocolor">
          <span class="list-detail-title">码用途</span>
          <span class="list-detail-content"><text user-select="true" :class="item.nocolor_url? 'href':''" @tap="articleDetail" :data-key="item.nocolor_arr">{{item.nocolor}}</text></span>
        </view>
        <view class="list-content" v-if="item.red">
          <span class="list-detail-title red">红色码</span>
          <span class="list-detail-content">{{item.red}}</span>
        </view>
        <view class="list-content" v-if="item.blue">
          <span class="list-detail-title blue">蓝色码</span>
          <span class="list-detail-content">{{item.blue}}</span>
        </view>
        <view class="list-content" v-if="item.green">
          <span class="list-detail-title green">绿色码</span>
          <span class="list-detail-content">{{item.green}}</span>
        </view>
        <view class="list-content" v-if="item.black">
          <span class="list-detail-title black">黑色码</span>
          <span class="list-detail-content">{{item.black}}</span>
        </view>
        <view class="list-content" v-if="item.yellow">
          <span class="list-detail-title yellow">黄色码</span>
          <span class="list-detail-content">{{item.yellow}}</span>
        </view>
        <view class="list-content" v-if="item.purple">
          <span class="list-detail-title purple">紫色码</span>
          <span class="list-detail-content">{{item.purple}}</span>
        </view>
        <view class="list-content" v-if="item.gray">
          <span class="list-detail-title gray">灰色码</span>
          <span class="list-detail-content">{{item.gray}}</span>
        </view>
        <view class="list-content" v-if="item.orange">
          <span class="list-detail-title orange">橙色码</span>
          <span class="list-detail-content">{{item.orange}}</span>
        </view>
        <view class="list-content" v-if="item.laoren_url">
          <span class="list-detail-title">老人小孩</span>
          <span class="list-detail-content"><a @tap="articleDetail" :data-key="item.laoren_arr">点击查看老人小孩申领攻略</a></span>
        </view>
        <view class="list-content" v-if="item.result_url">
          <span class="list-detail-title">结果查询</span>
          <span class="list-detail-content"><a @tap="articleDetail" :data-key="item.result_arr">点击查询申领结果</a></span>
        </view>
        <view class="list-content list-content-btn" style="display:flex;">
          <a @tap="articleDetail" :data-key="item.wenti_arr">
            <image class="btn-icon" src="http://imgbdb3.bendibao.com/xcxbdb/file/20212/20/20210220142121_91067.jpeg" alt></image>
            <span>问题解答</span>
          </a>
          <a @tap="articleDetail" :data-key="item.wenti_arr">
            <image class="btn-icon" src="http://imgbdb3.bendibao.com/xcxbdb/file/20212/20/20210220142221_91071.jpeg" alt></image>
            <span>申领攻略</span>
          </a>
        </view>
      </view>
    </view>
    <fangyi-tools id="fangyiTools"></fangyi-tools>

      <!-- 轮播图 -->
  <swiper class="banner-content" indicator-dots autoplay v-if="bannerArr.length!=0">
    <swiper-item v-for="(item, index) in bannerArr" :key="index">
      <image class="banner" :src="item.img" :data-path="item.href" @tap="toBannerDetail">
      </image>
    </swiper-item>
  </swiper>
    <!-- 导粉 -->
    <view class="daofen" v-if="daofen">
    <rich-text :nodes="daofen.content" style="user-select:text;-webkit-user-select:text">
    </rich-text>
  </view>
  <fixed-btn :city="city" :path="'/pages/index/index?city=' + cityCode">
    <text slot="left">查看</text><text slot="right">更多专题</text>
  </fixed-btn>
</view>
</template>

<script module="tools" lang="wxs" src="../../../wxs/includesHttp.wxs"></script>

<script>
// pages/topicality/jiankangma/jiankangma.js
const app = getApp();
const util = require("../../../utils/util.js");
var QQMapWX = require("../../../utils/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js");
var qqmapsdk = new QQMapWX({
  key: 'KR7BZ-XSQ3P-VGFD7-LNRZL-E7PXE-STF76'
});
import fangyiTools from "../../../component/fangyiTools/fangyiTools";
import changeCity from "../../../component/changeCity/changeCity";
import fixedBtn from "../../../component/fixedBtn/fixedBtn";

export default {
  data() {
    return {
      city: '深圳',
      cityCode: 'sz',
      list: [],
      bannerArr: [],
      desc: '',
      daofen: ''
    };
  },

  components: {
    fangyiTools,
    changeCity,
    fixedBtn
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    util.getUrl(app.globalData.url).then(e => {
      this.getLocation();
      this.render(this.cityCode);
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: this.desc
    };
  },
  methods: {
    // 获取定位
    getLocation() {
      qqmapsdk.reverseGeocoder({
        success: res => {
          let city = res.result.address_component.city;

          if (city && !city.includes(this.city)) {
            uni.showModal({
              content: '您当前定位城市为' + city + '\n是否需要切换到' + city + '健康码查询？',
              success: async res => {
                if (res.confirm) {
                  city = city.substr(0, city.length - 1);
                  const cityCode = await this.getCityCode(city);
                  this.setData({
                    city,
                    cityCode
                  });
                  this.render(this.cityCode);
                  this.selectComponent("#fangyiTools").getTools(this.cityCode);
                }
              }
            });
          }
        }
      });
    },

    // 获取cityCode,参数为市
    async getCityCode(city) {
      const res = await util.request("citycode.php", {
        action: "city",
        city: city
      }, "POST");
      return res.data.data[0].citycode;
    },

    // 获取轮播banner
    getBanners(citycode) {
      util.request('citycode.php', {
        action: 'lunbo',
        citycode: citycode
      }, 'POST').then(e => {
        this.setData({
          bannerArr: e.data.data
        });
      });
    },

    //banner详情
    toBannerDetail(e) {
      let path = e.currentTarget.dataset.path;
      let linkname = e.currentTarget.dataset.title;
      let appid = e.currentTarget.dataset.appid || '';

      if (path) {
        if (path.indexOf("pages") == -1 && path.indexOf("mp.weixin.qq.com") == -1 && !appid) {
          util.navContact(linkname, path);
        } else {
          util.navMethod(path, appid);
        }
      } else {
        uni.showToast({
          title: '还没有这个入口哦~',
          icon: 'none'
        });
      }
    },

    // 下方切换城市
    changeCity(e) {
      this.setData({
        city: e.detail.city,
        cityCode: e.detail.cityCode
      });
      this.render(this.cityCode);
    },

    render(cityCode) {
      this.getBanners(cityCode);
      this.selectComponent("#fangyiTools").getTools(cityCode);
      util.request('zhuanti.php', {
        action: 'jiankangma',
        citycode: cityCode
      }, "POST").then(e => {
        this.setData({
          list: e.data.data.list,
          desc: e.data.data.desc,
          daofen: e.data.data.daofen
        });
      });
    },

    // 文章跳转
    articleDetail(e) {
      let data = util.getValue("key", e);

      if (!data || !data.url) {
        return;
      }

      if (data.type == "article") {
        if (data.id) {
          uni.navigateTo({
            url: `/pages/article/detail/detail?id=${data.id}&city=${data.citycode}&type=${data.type}`
          });
        } else {
          util.navContact('ss', data.url);
        }
      } else {
        util.navContact('ss', data.url);
      }
    }

  }
};
</script>
<style>
/* pages/topicality/jiankangma/jiankangma.wxss */
p {
	margin: 0;
}


.body{
  background-color: rgb(256, 256, 256);
  padding-bottom: 110rpx;
}
.city {
	position: absolute;
	top: 26rpx;
	right: 25rpx;
	height: 50rpx;
  display: flex;
  padding: 0 30rpx;
	align-items: center;
	justify-content: center;
	line-height: 37.5rpx;
	border-radius: 187.5rpx;
	background-color: #ffffff;
}

.city-name {
	font-weight: 600;
	color: rgb(14, 20, 87);
	font-size: 26rpx;
}

.city-icon {
	width: 18rpx;
	height: 10rpx;
	margin-left: 10rpx;
}


.header {
  width: 100%;
  height: 300rpx;
  display: block;
  margin-bottom: 80rpx;
}

/* 内容 */
.list {
	margin-top: 40rpx;
	margin-bottom: 16rpx;
}
.list-item {
	display: flex;
	align-items: center;
	font-size: 36rpx;
	font-weight: 600;
	margin: 30rpx 30rpx;
}

.list-item a {
	color: inherit;
}

.title-icon {
	width: 34rpx;
	height: 37rpx;
	margin-right: 30rpx;
}

.fgx {
	background-color: #ffffff;
}

.control {
	display: flex;
	align-items: center;
	font-size: 46rpx;
	opacity: .7;
	font-weight: 400;
	color: rgb(154, 154, 154);
}

.control p {
	margin-right: 20rpx;
	font-size: 26rpx;
}

.list-detail {
	margin-top: 20rpx;
	background: #F3F4FB;
	border-radius: 21rpx;
	padding: 10rpx;
	margin: 0 28rpx;
	padding-bottom: 20rpx;
}

.list-detail-title {
	margin-right: 20rpx;
	width: 130rpx;
	padding-top: 5rpx;
}

.list-detail-content {
	color: #666;
	width: 80%;
	line-height: 48rpx;
	border-bottom: 2rpx solid rgba(236, 236, 236, 1);
	padding-bottom: 20rpx;
}

.list-content {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	margin: 20rpx 18rpx;
	font-size: 26rpx;
	color: #000000;
}

.list-detail-icon {
	width: 9rpx;
	height: 16rpx;
}

.list-detail-content {
	color: #666;
	width: 80%;
	line-height: 48rpx;
}

.list-content-btn {
	display: flex;
	padding: 0 40rpx;
}

.list-content-btn a {
	padding: 10rpx 20rpx;
	justify-content: center;
	border-radius: 40rpx;
	color: rgb(21, 30, 135);
	font-weight: bold;
	margin-left: 20rpx;
	background: #D9E6F8;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16rpx 36rpx;
}

.list-content-btn a span {
	margin-left: 10rpx;
}

.list-detail-content ul {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.list-detail .list-content:nth-child(2) .list-detail-title {
	padding-top: 17rpx;
}

.list-detail-content a {
	color: #5195DD;
}

.list-content-btn a.btn-gonglue {
	margin-left: auto;
}

.guide {
	text-align: center;
	justify-content: space-around;
	display: flex;
	align-items: center;
	background: #C9DDFF;
	padding: 13rpx 30rpx;
	font-weight: 600;
	font-size: 26rpx;
	border-radius: 50rpx;
	width: 180rpx;
}

.guide-b-icon {
  width: 40rpx;
  height: 40rpx;
}

.guide-a-icon {
  width: 15rpx;
  height: 22rpx;
}

.list-detail-content ul li {
	margin-top: 20rpx;
}

.list-detail-content ul:first-child li {
	margin-top: 0;
}

.guide span {
	margin: 0 6rpx;
}



.city-name {
	font-weight: 600;
	color: rgb(14, 20, 87);
	font-size: 26rpx;
}

.city-icon {
	width: 18rpx;
	margin-left: 10rpx;
}

.tab-bar {
	margin-top: 23.75rpx;
	margin: 0 28rpx;
	padding-bottom: 100rpx;
}

.bar-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 2.25rpx solid rgb(238, 238, 238);
	padding-left: 0;
	font-size: 32rpx;
	color: rgba(91, 91, 91, 1);
	margin: 0 0 0 0;
	padding-top: 4rpx;
}

.click {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: rgba(20, 20, 20, 1);
	line-height: 80rpx !important;
	font-weight: 600;
}

.click image {
	width: 60rpx;
	height: 7rpx;
}

.imp {
	padding: 37.5rpx 10rpx;
	border-bottom: 2.25rpx solid rgb(238, 238, 238);
}

.tab-content ul {
	padding-left: 0;
	margin: 0;
}

.tab-content ul li:last-child .imp {
	border: 0;
}

.imp-title {
	display: flex;
}

.imp-icon {
	width: 30rpx;
	height: 20rpx;
	margin-right: 20rpx;
	margin-top: 10rpx;
}

.imp-name {
	font-size: 31rpx;
	font-weight: 600;
	color: #000000;
}

.imp-content {
	font-size: 30rpx;
	color: rgb(102, 102, 102);
	margin-left: 5%;
	margin-top: 22.5rpx;
}

.time-box {
	text-align: center;
	color: #666;
	font-size: 24rpx;
	justify-content: center;
	margin-top: 20rpx
}

.all {
	height: 90rpx;
	width: 45%;
	margin: 30rpx auto;
	text-align: center;
	line-height: 90rpx;
	font-size: 30rpx;
	background: #F0EDF1;
	border-radius: 14rpx;
}

.btn-icon{
  width: 52rpx;
  height: 52rpx;
}
.red {
	color: #FC1A1A;
}

.yellow {
	color: #FCAB20;
}

.black {
	color: #141414;
}

.purple{ color:#F0F;}

.gray {
	color: #575757;
}

.blue {
	color: #1A6BC1;
}

.orange {
	color: #FF5529;
}

.green {
	color: #1F8830;
}
.href{
	color: #5195DD;
}
/* 轮播图 */
.banner-content{
	margin: 0 auto;
	margin-top: 20rpx;
	width: 720rpx;
}
.banner{
	width: 720rpx;
	height: 250rpx;
	border-radius: 20rpx;
	margin-bottom: 50rpx;
}
/* 导粉 */

.daofen {
	margin-bottom: 80rpx;
	text-align: center;
}

.p_class {
	margin: 10rpx 30rpx;
	line-height: 50rpx;
}
</style>